<template>
  <VaCard
    stripe
    stripe-color="success"
    color="#FAFAFA"
    style="max-width: 1200px; margin: 0 auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)"
  >
    <VaCardTitle style="font-size: larger">在此处书写你的自定义代码</VaCardTitle>
    <VaCardActions align="between">
      <VaSelect v-model="selectedLanguage" style="max-width: 200px" :options="languages" label="选择语言" />
      <VaButton color="primary" @click="saveModel">保存模型</VaButton>
    </VaCardActions>
    <VaCardContent>
      <div ref="monacoEditorContainer" class="content"></div>
    </VaCardContent>
  </VaCard>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useToast } from 'vuestic-ui'
import io from 'socket.io-client'
import { editor as MonacoEditor } from 'monaco-editor/esm/vs/editor/editor.api'

const toast = useToast() // 创建 Toast 实例
const socket = io('http://localhost:5000')

const monacoEditorContainer = ref(null)
const editorContent = ref('') // 用于存储编辑器的内容
const languages = ref(['python3'])
const selectedLanguage = ref('python3')

// watch(selectedLanguage, (newValue) => {
//   if (editorContent.value !== '') {
//     MonacoEditor.setModelLanguage(editorContent.value.getModel(), newValue)
//   }
// })

const saveModel = () => {
  console.log('1')
  console.log(toast)
  socket.emit('code', editorContent.value)
  console.log('保存的内容:', editorContent.value) // 确保这里是输出内容
  toast.init({ message: '保存成功', color: 'success' }) // 使用 Toast 实例
}

const initializeEditor = async () => {
  if (monacoEditorContainer.value) {
    const editor = MonacoEditor.create(monacoEditorContainer.value, {
      theme: 'vs-dark',
      value: 'from torchvision import models\nmodel = models.resnet50(pretrained=True)',
      language: 'python',
      folding: true,
      showFoldingControls: 'always',
      automaticLayout: true,
      scrollBeyondLastLine: false,
      readOnly: false,
      fontSize: 18, // 设置字体大小
    })

    editor.onDidChangeModelContent(() => {
      // 每当编辑器内容变化时，更新 editorContent
      editorContent.value = editor.getValue()
    })
  }
}

onMounted(() => {
  initializeEditor()
})
</script>

<style scoped>
.content {
  width: 100%;
  height: calc(100vh - 150px); /* Adjust the height calculation based on actual header/footer size */
  border: 2px solid #ccc; /* Adds a subtle border for the editor */
}
</style>
